<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript">
</script>
</head>
<body>
<canvas id="myCanvas" width="300" height="100"></canvas>
<script type="text/javascript">
var ctx = document.getElementById('myCanvas').getContext('2d');
ctx.font = "bold 20px 楷体";
ctx.fillStyle="Blue";
var txt1 = "滚滚长江东逝水，浪花淘尽英雄。";
ctx.fillText(txt1,10,40);
var txt2 = "以上字符串的宽度为：";
var mtxt1 = ctx.measureText(txt1);
var mtxt2 = ctx.measureText(txt2);
ctx.font = "bold 15px 宋体";
ctx.fillStyle="Red";
ctx.fillText(txt2,10,80);
ctx.fillText(mtxt1.width,mtxt2.width,80);


</script>
</body>
</html> 
